<template>
  <div class="setting-container">
    <el-card class="card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="角色管理" name="first" class="first">
          <!-- 角色管理 -->
          <div class="addBtn">
            <el-button type="primary" size="small" @click="addRole"
              ><i class="el-icon-plus"></i> 新增角色</el-button
            >
          </div>
          <!-- 表格 -->
          <el-table :data="list" style="width: 100%" border>
            <el-table-column type="index" label="序号" width="150">
            </el-table-column>
            <el-table-column prop="name" label="角色名" width="150">
            </el-table-column>
            <el-table-column prop="description" label="描述"> </el-table-column>
            <el-table-column label="操作" width="250">
              <template slot-scope="{ row }">
                <el-button type="text" @click="openSetRoleDialog(row)">
                  分配权限
                </el-button>
                <el-button type="text" @click="editRole(row)">修改</el-button>
                <el-button type="text" @click="delRole(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">
          <!-- 公司信息 -->
          <div class="infomation">
            <el-form :model="companyInfo" label-width="100px">
              <el-form-item label="企业名称">
                <el-input v-model="companyInfo.name" disabled></el-input>
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input
                  v-model="companyInfo.companyAddress"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="公司电话">
                <el-input
                  v-model="companyInfo.companyPhone"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="companyInfo.mailbox" disabled></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="companyInfo.remarks" disabled></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 弹出框 -->
    <el-dialog :title="title" :visible.sync="showDialog">
      <el-form :model="form" :rules="rules" ref="formRole" label-width="100px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            showDialog = false
            form = { name: '', description: '' }
          "
        >
          取 消
        </el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分配权限面板 -->
    <setrole ref="mysetrole" :show.sync="show" :username="username"></setrole>
  </div>
</template>

<script>
// 导入接口
import {
  getRoleList,
  addRole,
  editRole,
  deleteRole,
  getCompanyInfo
} from '@/api/setting'
export default {
  name: 'setting',
  data () {
    return {
      activeName: 'first',
      list: [], // 表格数据
      currentPage: 1, // 当前页
      pageSizes: [2, 3, 4, 5], // 页容量集合
      pageSize: 2, // 当前每页显示条数
      total: 0, // 全部条数
      form: {
        name: '', // 角色名称
        description: '' // 角色描述
      },
      title: '', // 显示新增/修改标题
      showDialog: false, // 控制面板显示与隐藏
      rules: {
        name: [{ required: true, trigger: 'blur' }],
        description: [{ required: true, trigger: 'blur' }]
      }, // 表单校验规则
      companyInfo: {}, // 公司信息
      show: false, // 控制分配权限面板的显示与隐藏
      username: '' // 面板显示给谁设置权限
    }
  },
  methods: {
    // 页容量改变时触发
    handleSizeChange (size) {
      // 修改页容量
      this.pageSize = size
      this.currentPage = 1
      // 再次调用请求数据方法
      this.getRoleData()
    },
    // 页码改变时触发
    handleCurrentChange (page) {
      // 修改当前页码
      this.currentPage = page
      // 再次调用请求数据方法
      this.getRoleData()
    },
    // 获取角色列表方法
    async getRoleData () {
      let res = await getRoleList({
        page: this.currentPage,
        pagesize: this.pageSize
      })
      // 保存数据
      this.list = res.data.data.rows
      // 保存全部条数
      this.total = res.data.data.total
    },
    // 新增角色
    addRole () {
      this.showDialog = true
      this.title = '新增角色'
    },
    // 更新角色
    editRole (row) {
      this.showDialog = true
      this.title = '编辑角色'
      // 修改form，渲染数据
      this.form = { ...row }
    },
    // 点击确定按钮（新增 & 修改）
    submitData () {
      // 全局表单校验
      this.$refs.formRole.validate(async val => {
        if (val) {
          // 验证通过
          if (!this.form.id) {
            // 表示新增， 发请求新增数据
            await addRole(this.form)
          } else {
            // 表示编辑
            await editRole(this.form)
          }
          // 提示新增成功
          this.$message.success(this.form.id ? '修改成功' : '新增成功')
          // 关闭面板
          this.showDialog = false
          // 清空数据
          this.form = { name: '', description: '' }
          // 更新数据
          this.getRoleData()
        } else {
          console.log('表单验证失败')
        }
      })
    },
    // 删除角色
    async delRole (id) {
      try {
        // 判断是否确定删除
        await this.$confirm('确定删除此数据吗', '警告')
        // 删除
        await deleteRole(id)
        // 提示
        this.$message.info('删除成功')
        // 判断是否为最后一条数据
        if (this.list.length == 1 && this.currentPage !== 1) {
          // 表示为最后一条且不为第一页，则更新前一页数据
          this.currentPage--
          this.getRoleData()
        } else {
          // 否则表示为第一页或不是最后一条数据，更新当前页数据
          this.getRoleData()
        }
      } catch (error) {
        console.log('取消 & 出错')
      }
    },
    // 获取公司信息
    async getInfo () {
      // 获取公司 id
      let id = this.$store.getters.userInfo.companyId
      let res = await getCompanyInfo(id)
      // console.log(res);
      this.companyInfo = res.data.data
    },
    // 打开分配权限的面板
    openSetRoleDialog (row) {
      this.show = true
      this.username = row.name
      this.$refs.mysetrole.getRoleDetail(row.id)
    }
  },
  created () {
    this.getRoleData()
    // 调用获取公司信息方法
    this.getInfo()
  },
  components: {
    setrole: () => import('./components/setrole.vue')
  }
}
</script>

<style lang="scss">
.setting-container {
  .card {
    margin: 20px;

    .addBtn {
      margin-bottom: 20px;
    }

    .el-tabs__item {
      font-size: 20px;
    }
    .first {
      padding: 40px 20px;

      .pagination {
        margin-top: 36px;
      }
    }
  }
  .infomation {
    width: 500px;
    margin-left: 80px;
    margin-top: 25px;
  }
}
</style>
